import { useRef, useState } from "react";
import { message, Button } from "antd";
import { PageContainer } from "@ant-design/pro-layout";
import useCommonTable from "@/hooks/useCommonTable";
import { fetchList, add, update, remove } from "@/api/bookCategory";
import { PlusOutlined } from "@ant-design/icons";
import { history } from "umi";
import { filterPackageType } from "@/const";
import ProForm, { ModalForm, ProFormText } from "@ant-design/pro-form";

export default () => {
  const formRef = useRef();
  const columns = [
    {
      title: "分类名称",
      dataIndex: "categoryName",
      width: 150,
      search: false,
    },
  ];

  const renderModalForm = (actionType, record, actionRef) => {
    // actionType 1=新增大类 2=修改大类 3=新增分类 4=修改分类
    const maps = {
      1: "新增大类",
      2: "修改大类",
      3: "新增分类",
      4: "修改分类",
    };

    const handleAddOrUpdate = async (fields) => {
      const postData = {
        ...fields,
        id: actionType === 3 ? "" : record?.id,
        parentId: actionType === 3 ? record.id : record?.parentId,
      };
      let func = add;
      if (actionType === 2 || actionType === 4) {
        func = update;
      }
      const res = await func(postData);
      if (res.data) {
        message.success(maps[actionType] + "成功");
        actionRef.current?.reload();
        return true; // 关闭弹框
      }
    };

    return (
      <ModalForm
        key={maps[actionType]}
        formRef={formRef}
        labelCol={{ span: 4 }}
        layout="horizontal"
        title={maps[actionType]}
        width={600}
        trigger={
          <Button
            type={[1, 3].includes(actionType) ? "primary" : "default"}
            style={{ marginRight: 10 }}
            key="update"
          >
            {maps[actionType]}
          </Button>
        }
        modalProps={{
          destroyOnClose: true,
          onCancel: () => {
            formRef.current?.resetFields();
          },
        }}
        onFinish={async (values) => {
          return await handleAddOrUpdate(values);
        }}
        initialValues={{
          ...record,
          categoryName: actionType === 3 ? "" : record?.categoryName,
        }}
      >
        <ProFormText hidden label="id" name="id" />
        <ProFormText hidden label="父级id" name="parentId" />

        <ProFormText
          label={[1, 2].includes(actionType) ? "大类名称" : "分类名称"}
          name="categoryName"
          rules={[
            { required: true, message: "请输入" },
            {
              max: 50,
              message: "最长为50位",
            },
          ]}
        />
      </ModalForm>
    );
  };

  return (
    <PageContainer>
      {useCommonTable({
        search:false,
        pagination: false,
        columns,
        modalWidth: 600,
        fetchList,
        remove,
        actionColumnWidth: 200,
        showCheckbox: false,
        renderAdd: (actionRef) => {
          return renderModalForm(1, {}, actionRef);
        },
        renderEdit: (record, actionRef) => {
          return renderModalForm(record.parentId ? 4 : 2, record, actionRef);
        },
        renderOtherAction: (_, record, actionRef) => {
          return record.parentId ? null : renderModalForm(3, record, actionRef);
        },
      })}
    </PageContainer>
  );
};
